<!-- <template>
  <div>
    <button @click="exportExcel" style="width: 300px;height:100px;">下载 Excel</button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      // 你的表格数据
      data: [
        { col1: '数据1', col2: '数据2', col3: '数据3', col4: '数据4', col5: '数据5', col6: '数据6', col7: '数据7' },
        { col1: '数据8', col2: '数据9', col3: '数据10', col4: '数据11', col5: '数据12', col6: '数据13', col7: '数据14' }
      ],
      backendData: [
        { col1: '数据1', col2: '数据2', col3: '数据3', col4: '数据4', col5: '数据5', col6: '数据6', col7: '数据7' },
        { col1: '数据A', col2: '数据B', col3: '数据C', col4: '数据D', col5: '数据E', col6: '数据F', col7: '数据G' },
      ],
      tableData: [
        ['Header 1'],
        ['Header 2', 'Header 3'],
        // ['Header 4', 'Header 5', 'Header 6'],
        ['Header 7', 'Header 8', 'Header 9', 'Header 10'],
        ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7', 'Data 8']
      ],
    };
  },
  methods: {
    exportExcel() {
      const datas = [
        ['河北正定中学卫生材料领用单'],
        ['NO.Y000001', 0, 0, '第1页',],
        ['库房', 0, '领用科室', 0, '领用人',],
        ['材料信息', '材料分类', '规格', '单位', '数量', '售价', '售价金额',],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
        ['洗衣粉', '物资用品', '袋', '克', '10', '100', '100'],
      ];
      const wscols = [
        { wch: 110 }, // 约等于 10 个字符宽度
        { wch: 115 },
        { wch: 120 },
        { wch: 125 },
        { wch: 130 },
        { wch: 135 },
        { wch: 140 },
      ];

      // 将数据转换为工作表
      const ws = XLSX.utils.aoa_to_sheet(datas);

      // 定义合并单元格
      ws['!merges'] = [
        { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } }, // 第一行合并一格

        { s: { r: 1, c: 0 }, e: { r: 1, c: 2 } }, // 第二行合并两格
        { s: { r: 1, c: 3 }, e: { r: 1, c: 6 } }, // 第二行合并两格

        { s: { r: 2, c: 0 }, e: { r: 2, c: 1 } }, // 第三行合并三格
        { s: { r: 2, c: 2 }, e: { r: 2, c: 3 } }, // 第三行合并三格
        { s: { r: 2, c: 4 }, e: { r: 2, c: 5 } }, // 第三行合并三格 

      ];
      ws['!cols'] = wscols
      // 创建工作簿
      const wb = { Sheets: { 'Sheet1': ws }, SheetNames: ['Sheet1'] };
      // 导出 Excel 文件
      XLSX.writeFile(wb, 'custom_table.xlsx');
    },

  },
};





 // setExlStyle(data) {
    //   const borderAll = {  // 单元格外侧框线
    //     top: { style: 'thin' },
    //     bottom: { style: 'thin' },
    //     left: { style: 'thin' },
    //     right: { style: 'thin' }
    //   };

    //   data['!cols'] = [];
    //   for (let key in data) {
    //     if (data[key] instanceof Object) {
    //       data[key].s = {
    //         border: borderAll,  // 为每个单元格设置边框
    //         alignment: {
    //           horizontal: 'center',   // 水平居中对齐
    //           vertical: 'center'      // 垂直居中
    //         },
    //         font: {
    //           sz: 11,    // 字体大小
    //           bold: true  // 粗体
    //         },
    //         numFmt: 0  // 数字格式
    //       };
    //       data['!cols'].push({ wpx: 115 });  // 设置列宽
    //     }
    //   }
    //   return data;
    // },

    // addRangeBorder(range, ws) {
    //   let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

    //   range && range.forEach(item => {
    //     let startRowNumber = Number(item.s.r),
    //       endRowNumber = Number(item.e.r),
    //       startColNumber = Number(item.s.c),
    //       endColNumber = Number(item.e.c);

    //     // 添加边框到合并单元格
    //     for (let row = startRowNumber; row <= endRowNumber; row++) {
    //       for (let col = startColNumber; col <= endColNumber; col++) {
    //         ws[`${arr[col]}${row + 1}`] = { s: { border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } } } };
    //       }
    //     }
    //   });

    //   return ws;
    // },








    // setExlStyle(data) {
    //   let borderAll = {  //单元格外侧框线
    //     top: {
    //       style: 'thin',
    //     },
    //     bottom: {
    //       style: 'thin'
    //     },
    //     left: {
    //       style: 'thin'
    //     },
    //     right: {
    //       style: 'thin'
    //     }
    //   };
    //   data['!cols'] = [];
    //   for (let key in data) {
    //     if (data[key] instanceof Object) {
    //       data[key].s = {
    //         border: borderAll,
    //         alignment: {
    //           horizontal: 'center',   //水平居中对齐
    //           vertical: 'center'
    //         },
    //         font: {
    //           sz: 11
    //         },
    //         bold: true,
    //         numFmt: 0
    //       }
    //       data['!cols'].push({ wpx: 115 });
    //     }
    //   }
    //   return data;
    // },

    // addRangeBorder(range, ws) {
    //   let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
    //   range && range.forEach(item => {
    //     let startRowNumber = Number(item.s.c),
    //       endRowNumber = Number(item.e.c);
    //     for (let i = startRowNumber; i <= endRowNumber; i++) {
    //       for (let j = Number(item.s.r) + 1; j <= Number(item.e.r); j++) {
    //         ws[`${arr[i]}${j + 1}`] = { s: { border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } } } };
    //       }
    //     }
    //   })
    //   return ws;
    // },











</script> -->





<template>
  <button @click="toExcel" style="width: 300px;height:100px;">下载 Excel</button>
  <table ref="table">
    <thead>
      <tr>
        <th colspan="7" style="text-align: center; ">河北正定中学卫生材料领用单</th>
      </tr>
      <tr>
        <th colspan="3">NO. Y000292</th>
        <th colspan="4">第1页/第3页</th>
      </tr>
      <tr>
        <th colspan="2">库房：物资库房</th>
        <th colspan="2">领用科室：顾客医院</th>
        <th colspan="2">领用人：张三</th>
        <th></th>
      </tr>
      <tr>
        <th>材料信息</th>
        <th>材料分类</th>
        <th>规格</th>
        <th>单位</th>
        <th>数量</th>
        <th>售价</th>
        <th>售价金额</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.materialName }}</td>
        <td>{{ item.categoriesName }}</td>
        <td>{{ item.specification }}</td>
        <td>{{ item.unit }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.quantity * item.price }}</td>
      </tr>
      <tr>
        <td colspan="1" style="text-align: left; ">摘要</td>
        <td colspan="2">填制人：陈松</td>
        <td colspan="2">填制日期：2024/11/8 15:22:21</td>
        <td colspan="2">领料人签字：</td>
      </tr>
    </tbody>
  </table>

</template>

<script>
import { httpService } from "@/utils/httpService";
import { formatTime } from "@/utils/dateFormat";
import * as XLSX from "xlsx";
import XLSXS from "xlsx-style"
import { saveAs } from "file-saver";

// import XLSX from 'xlsx-style';
// import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      list: [],

    };
  },
  mounted() {
    this.queryById()
  },
  methods: {
    queryById(id) {
      httpService(`/javaApi/stockOut/list/1/100`, { receiptId: 13 }, "get").then(
        (data) => {
          if (data.list) {
            data.list.map(item => item.createdAt = formatTime(new Date(item.createdAt)))
            this.list = data.list
          }
        });
    },






    toExcel() {
      const data = this.list; // 数据列表
      const rowsPerPage = 10; // 每页显示的行数
      const sheetData = [];
      const merges = []; // 合并单元格信息
      let pageCount = 1;

      data.forEach((item, index) => {
        // 每页开始时添加表头
        if (index % rowsPerPage === 0) {
          const startRow = sheetData.length;

          // 表头部分
          sheetData.push(["河北正定中学卫生材料领用单", "", "", "", "", "", ""]);
          sheetData.push([
            "NO. Y000292",
            "",
            "",
            `第${pageCount}页/共${Math.ceil(data.length / rowsPerPage)}页`,
            "",
            "",
            ""
          ]);
          sheetData.push([
            "库房：物资库房",
            "",
            "领用科室：顾客医院",
            "",
            "领用人：张三",
            "",
            ""
          ]);
          sheetData.push([
            "材料信息",
            "材料分类",
            "规格",
            "单位",
            "数量",
            "售价",
            "售价金额"
          ]);

          // 添加表头的合并范围
          merges.push(
            { s: { r: startRow, c: 0 }, e: { r: startRow, c: 6 } }, // 标题合并
            { s: { r: startRow + 1, c: 0 }, e: { r: startRow + 1, c: 2 } },
            { s: { r: startRow + 1, c: 3 }, e: { r: startRow + 1, c: 6 } },
            { s: { r: startRow + 2, c: 0 }, e: { r: startRow + 2, c: 1 } },
            { s: { r: startRow + 2, c: 2 }, e: { r: startRow + 2, c: 3 } },
            { s: { r: startRow + 2, c: 4 }, e: { r: startRow + 2, c: 5 } }
          );

          pageCount++;
        }

        // 添加数据行
        sheetData.push([
          item.materialName,
          item.categoriesName,
          item.specification,
          item.unit,
          item.quantity,
          item.price,
          item.quantity * item.price
        ]);

        // 添加表尾
        if ((index + 1) % rowsPerPage === 0 || index === data.length - 1) {
          const footerStartRow = sheetData.length;

          sheetData.push([
            "摘要",
            "填制人：陈松",
            "",
            "填制日期：2024/11/8 15:22:21",
            "",
            "领料人签字：",
            "",
          ]);

          merges.push(
            { s: { r: footerStartRow, c: 0 }, e: { r: footerStartRow, c: 0 } },
            { s: { r: footerStartRow, c: 1 }, e: { r: footerStartRow, c: 2 } },
            { s: { r: footerStartRow, c: 3 }, e: { r: footerStartRow, c: 4 } },
            { s: { r: footerStartRow, c: 5 }, e: { r: footerStartRow, c: 6 } },
          );

          // 添加间隔行
          sheetData.push([], []);
        }
      });

      // 生成工作表
      let ws = XLSX.utils.aoa_to_sheet(sheetData);
      console.log('ws', ws);

      // 添加合并单元格信息
      ws["!merges"] = merges;

      // 设置边框和样式
      ws = this.setExlStyle(ws);

      // 导出 Excel
      let wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "分组表");

      const excelData = XLSX.write(wb, { bookType: "xlsx", type: "array" });


      var table = XLSXS.write(wb, {
        type: "buffer"
      });
      try {
        saveAs(
          new Blob([table], { type: "application/octet-stream" }),
          `5.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, table);
      }
      return table;



      // saveAs(new Blob([excelData], { type: "application/octet-stream" }), `分页表格.xlsx`);
    },

    setExlStyle(data) {
      const borderAll = { // 单元格外侧框线
        top: { style: "thin" },
        bottom: { style: "thin" },
        left: { style: "thin" },
        right: { style: "thin" }
      };

      // 获取工作表的范围
      const range = XLSX.utils.decode_range(data["!ref"]);

      for (let R = range.s.r; R <= range.e.r; ++R) {
        for (let C = range.s.c; C <= range.e.c; ++C) {
          const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });
          if (!data[cellAddress]) {
            data[cellAddress] = { v: "" }; // 如果单元格没有内容，设置为空字符串
          } else { 
            data[cellAddress].s = {
              border: borderAll, // 添加边框
              alignment: {
                horizontal: "center", // 水平居中对齐
                vertical: "center"    // 垂直居中对齐
              }
            };
          }
        }
      }

      // 设置列宽
      data["!cols"] = [
        { wpx: 115 },
        { wpx: 115 },
        { wpx: 115 },
        { wpx: 115 },
        { wpx: 115 },
        { wpx: 115 },
        { wpx: 115 }
      ];

      return data;
    }










  },
};
</script>
<style>
table {
  border-collapse: collapse;
  text-align: center;
}

table th,
table td {
  border: 1px solid #000;
  padding: 8px;
  width: 150px;
}
</style>